<template>
  <div>
    <div class="user_myprofile user_info_page">

      <div>
        <el-collapse v-model="activeNames">
          <el-collapse-item title="修改密码" name="1">
            <div style="margin: 40px;">
              <el-form ref="form" :model="user" label-width="80px">

                <el-form-item label="请输入旧密码">
                  <el-input type="password" v-model="user.password"></el-input>
                </el-form-item>

                <el-form-item label="请输入新密码">
                  <el-input type="password" v-model="user.newPassword"></el-input>
                </el-form-item>

                <el-button type="primary" plain @click="updatePassword">提交</el-button>
              </el-form>
            </div>
          </el-collapse-item>
        </el-collapse>

      </div>
    </div>
  </div>


</template>

<script>

  export default {
    name: "",
    data(){
      return{
        user:{
          password:'',
          newPassword:''
        },
        activeNames: ['1']
      }
    },
    methods: {
      updatePassword:function () {
        // alert(this.user.image)
        this.$axios.post("tpp-cloud-user/user/updatePassword1",this.user).then(res => {
          console.log(res.data)
          if (res.data.code==0) {
            this.user = res.data.data;
            // url=res.data.data.image;
            const h = this.$createElement;

            this.$notify({
              title: '修改成功',
              message: h('i', { style: 'color: teal'}, '用户密码修改成功')
            });
          }
          else {
            const h = this.$createElement;

            this.$notify({
              title: '修改失败',
              message: h('i', { style: 'color: teal'}, '用户密码修改失败')
            });
          }
        })
      }
    },
    mounted() {
      this.$axios.post("tpp-cloud-user/user/findUserByToken").then(res => {
        console.log(res.data)
        if (res.data.code==0) {
          this.user = res.data.data;
        }
      })

    }
  }
</script>

<style scoped>
  .user_myprofile .togglebtn span {
    display: block;
    float: left;
    margin: 10px;
    height: 20px;
    width: 20px;
    background-image: url(../../static/images/1122321.jpg );
    margin-left: 20px;
  }
  .togglebtn p {
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    margin-left: 10px;
    color: #555555;
  }
  .u_mainbody .user_info_page .myprofile_main {
    padding-top: 0;
    margin-top: 0;
  }
  html, body, div, p, ul, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, form, input, select, button, textarea, iframe, table, th, td {
    margin: 0;
    padding: 0;
  }
  user agent stylesheet
  div {
    display: block;
  }

  body {
    background: none repeat scroll 0 0 #f7f7f7;
    color: #333333;
    line-height: 1.2;
    font: 12px/1.5 "微软雅黑", Helvetica, Arial, sans-serif;
    letter-spacing: normal !important;
  }
  body, input, select, button, textarea {
    font-size: 12px;
    font-family: "微软雅黑";
  }
  user agent stylesheet

  .u_mainbody .userinfo .uinfo_left .utx {
    height: 120px;
    width: 120px;
    margin-right: 10px;
    position: relative;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
</style>

